<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/admin/index.html' }">管理后台</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="user" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <div class="page-main">
            <div class="admin-panel padding-20">
                <div class="panel-header">
                    <el-form :inline="true" :model="query">
                        <el-form-item>
                            <el-input v-model="query.mobile" placeholder="手机号" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    v-model="query.dateRange"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始注册日期"
                                    end-placeholder="结束注册日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="load(1)"><i class="el-icon-search"></i></el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="panel-body no-padding">
                    <el-table :data="table.list" stripe border>
                        <el-table-column prop="id" label="ID" width="80"></el-table-column>
                        <el-table-column label="头像" width="80">
                            <template slot-scope="scope">
                                <el-avatar :size="40" :src="scope.row.avatar"></el-avatar>
                            </template>
                        </el-table-column>
                        <el-table-column prop="nickname" label="昵称"></el-table-column>
                        <el-table-column prop="mobile" label="手机号"></el-table-column>
                        <el-table-column prop="date" label="注册日期" align="center">
                            <template slot-scope="scope">
                                {{scope.row.registerTime | date}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="lastLogin" label="上次登录时间" align="center">
                            <template slot-scope="scope">
                                {{scope.row.lastLoginTime | datetime}}
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination :current-page="table.page"
                                   :page-size="table.size"
                                   :total="table.total"
                                   :hide-on-single-page="true"
                                   @current-change="load"
                                   layout="total, prev, pager, next, jumper"
                                   class="mm_pagination"
                                   background>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            query:{},
            table:{}
        },
        methods: {
            load: function (page = 1) {
                let vue = this;

                let url = `/admin/user/list?page=${page}&size=10`;
                axios.get(url, {params: vue.query}).then(resp => {
                    vue.table = resp.data || {};
                });
            }
        },
        mounted: function () {
            this.load();
        }
    })
</script>
</html>